iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
0
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 19

第十八章、你好啊鐵人們,接下來就由我鎖鏈 Canvas 對付你!(貳)

  • 分享至 

  • xImage
  •  

簡介

今天我們進入比較有趣的部分,製作基礎 Canvas 動畫,在 Canvas 內我們可以做到許多精美的互動設計,但由於每一次的動畫都必須要透過柳懶氣重新計算在渲染畫面,所以若是動畫做得越複雜,運算就會需要消耗更大量的時間與效能,因此,電腦的好壞決定了動畫的順暢度。這點是在製作 Canvas 動畫時必須要注意到的一個原則。

那麼確保身上的裝備都沒問題之後,我們就繼續踏上討伐魔王之路吧!

Canvas 基礎動畫

製作 Canvas 動畫影以下幾個基礎步驟

  1. 清除畫布:
    由於在 Canvas 中會不斷的動態重新計算元素座標位置,因此要是我們沒有清除先前的元素在畫布上的位置,就會變成像是 影分身之術一樣。我們可以透過 claerRect() 清除畫布,或是 fillRect() 填滿畫布覆蓋舊有的元素。
  2. 儲存畫布狀態:
    由於每一次的動畫運算都會改變一次畫布狀態,為了確保每一次繪製的畫布都是原始的狀態,我們需要先將該畫布的原始狀態保存起來,再去針對他做變化運算。
  3. 繪製動畫元素:
    在畫布上繪製要動作的元素。
  4. 恢復畫布狀態:
    儲存畫布狀態後,每一次的動畫運算都要更新到畫布起始狀態。

設定 Canvas 動畫的時間

  1. setInterval(function, delay):
    延遲固定秒數後重複執行動畫運算的過程。通常用在不會與其他元素互相影響的動畫。
  2. setTimeout(function, delay):
    延遲固定秒數後執行動畫,通常用在製作網頁遊戲,可以結合滑鼠或鍵盤控制事件來啟用 setTimeout。
  3. requestAnimationFrame(callback):
    專門給網頁動畫使用的函式,瀏覽器會自動判斷最佳動畫更新的時刻。這個函式能夠更流暢、更有效的運算動畫,該函式的 callback 數量通常為每 60 秒一次。

汽車移動

我們來簡單實作一下 canvas 動畫是如何繪製並且動起來的

  • 設定 Canvas 畫布架構與樣式
<canvas id="car"></canvas>
canvas {
  border: solid 2px;
}
var canvas = document.getElementById('car');
var ctx = canvas.getContext('2d');

canvas.width= 250
canvas.height= 250
  • 繪製小車子
function carMove () {
//車子本體
  ctx.fillStyle="blue"
  ctx.strokeRect(150, 180, 80, 50)
  ctx.fillRect(150, 180, 80, 50)
  
// 車子輪胎
  ctx.beginPath()
	  ctx.arc(170, 230, 8, 0, Math.PI*2)
	  ctx.arc(210, 230, 8, 0, Math.PI*2)
	ctx.fillStyle="black"
	ctx.fill()
}

carMove()
  • 設定時間
// 車子起始動畫位置
var time = 0
function carMove () {
	time++
	
	let carX = time%350-80
	
	ctx.fillStyle="blue"
	ctx.strokeRect(carX, 180, 80, 50)
	ctx.fillRect(carX, 180, 80, 50)
	
	ctx.beginPath()
		ctx.arc(carX+20, 230, 8, 0, Math.PI*2)
	  ctx.arc(carX+60, 230, 8, 0, Math.PI*2)
	ctx.fillStyle="black"
	ctx.fill()
}

// 一秒鐘執行 30 次動畫
setInterval(carMove, 30)
  • 讓車子從右側出去,在重左側進入畫面,此時的動畫會變成一整條有殘影的狀態。
// 取畫布的餘數,並再減調車體寬度,讓他完全隱藏在畫布外側
let carX = time%250-80
  • 清除畫布
// 從座標 [0,0]座標清除,清除範圍 = 畫布大小
ctx.clearRect(0,0,250,250)

完成


今天簡易基礎的 Canvas 動畫就講解到這邊啦~

其實 Canvas 還可以做出許多酷炫動畫,不過因為 Canvas 動畫實在太吃效能啦~ 筆者在製作時電腦一度當機ヾ(;゚;Д;゚;)ノ゙,所以大家在製作 Canvas 動畫時要記得隨時將檔案存檔,才不會爆掉喔~


參考資料


上一篇
第十七章、你好啊鐵人們,接下來就由我鎖鏈 Canvas 對付你!(壹)
下一篇
第十九章、你好啊鐵人們,接下來就由我鎖鏈 Canvas 對付你!(參)
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言